<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态输入框01</title>
	</head>
	<style>
		*{
		    margin: 0;
		    padding: 0;
		    outline: none;
		    box-sizing: border-box;
		}
		body{
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    min-height: 100vh;
		    background: linear-gradient(200deg,#7778FE,#7778FE,#7778FE,#F5CEFF,#F5CEFF,#F5CEFF);
		}
		.outer{
		    width: 450px;
		    background-color: #fff;
		    padding: 40px;
		    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
		    border-radius: 8px;
		}
		.outer .input-data{
		    position:relative;
		    width: 100%;
		    height: 40px;
		}
		.outer .input-data input{
		    width: 100%;
		    height: 100%;
		    border:none;
		    font-size: 17px;
		    border-bottom: 2px solid #c0c0c0;
		}
		.outer .input-data input:focus ~ label,
		.outer .input-data input:valid ~ label{
		    transform: translateY(-25px);
		    font-size: 15px;
		    color: red;
		}
		.outer .input-data label{
		    position: absolute;
		    bottom: 10px;
		    left: 0px;
		    color: #808080;
		    pointer-events: none;
		    transition: all 0.3s ease;
		}
		.outer .input-data .underline{
		    position: absolute;
		    bottom: 0px;
		    height: 2px;
		    width: 100%;
		    background-color: red;
		    transform: scaleX(0);
		    transition: all 0.8s ease;
		}
		.outer .input-data input:focus ~ .underline,
		.outer .input-data input:valid ~ .underline{
		    transform: scaleX(1);
		}
	</style>
	<body>
		<div class="outer">
			<div class="input-data">
				<input type="text" required>
				<div class="underline"></div>
				<label>请输入</label>
			</div>
		</div>
	</body>
</html>